<template>
  <view class="drawer-container" >
    <!-- 表头 -->
    <view class="head">
      <view @click="handler" class="cancel">×</view>
      <view>筛选</view>
    </view>
    <!-- 筛选条件 -->
    <view class="shift-list">
  <ConditionCom v-for="(value,key) in condition" :type = 'value' :name="key"  @pick="pickHandler"></ConditionCom>
    <!-- 按钮 -->
    <view>
      <button @click="reset">重置</button>
      <button @click="submit"> 提交</button>
    </view>
  </view>
</view>
</template>


<script >

import ConditionCom from "@/components/work/ConditionCom.vue"
export default {
  name: "",
  components:{ConditionCom},
  props: {
    condition:{
      type:Object,
    }
  },
  computed:{
  },
  data() {
    return {
      // 查询条件对象
      searchObj:{  
        aeraCode:'',
        companyExperience:'',
        education:'',
        enterprisePerson:'',
        jobType:'',
        position:'',
        recruitJob:'',
        wages:"",
      }
    };
  },
  methods: {
    // 关闭抽屉
    handler() {
      this.$emit("close");
    },
    // 重置
    resethandler(){
      this.searchObj = {}
    },
    // 选择
    pickHandler(name,code){
      console.log(name,code);
      this.searchObj[name] = code
      console.log(this.searchObj);
    },
    // 提交
    submit(){
      this.$emit('submit',this.searchObj)
    },
    // 重置
    reset(){
     this.searchObj = {}
    },
  },
 mounted() {
 },
};
</script>
<style  scoped>
  /* 容器 */
.drawer-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  z-index: 999;
}
/* 头部的样式 */
.head {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.cancel{
  margin: 10rpx;
  transform: scale(2);
}
.shift-list {
  background-color: #fff;
}

/* 按钮 */
.btns{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
}
</style>
